<template>
    <div>
        <div align="" style="">
            <span style="font-size: 23px;font-weight: bold;">进存销管理系统</span>
        </div>

        <el-row class="tac">
            <el-col :span="4">
                <h4>进存销管理系统</h4>
                <el-menu
                        default-active="2"
                        class="el-menu-vertical-demo"
                        unique-opened= "true">
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-folder-opened"></i>

                            <span>资料管理</span>
                        </template>
                        <el-menu-item-group style="margin-left: 60px">

                            <el-menu-item index="1-1" style="margin-left: 15px" @click="showTag('supplierShow')" v-show="supplier">
                                <i class="el-icon-tickets"></i>供应商管理</el-menu-item>
                            <el-menu-item index="1-2" v-show="custom"  @click="showTag('customShow')"><i class="el-icon-tickets"></i>客户管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="2">
                        <template slot="title">
                            <i class="el-icon-sold-out"></i>
                            <span>采购管理</span>
                        </template>
                        <el-menu-item-group style="margin-left: 60px">
                            <el-menu-item index="2-1" v-show="inputCar" @click="showTag('inputCarShow')"><i class="el-icon-tickets"></i>采购入库</el-menu-item>
                            <el-menu-item index="2-2" style="margin-left: 24px" v-show="inputInfo" @click="showTag('inputInfoShow')">
                                <i class="el-icon-tickets"  ></i>采购信息查询</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="3">
                        <template slot="title">
                            <i class="el-icon-sell"></i>
                            <span>销售管理</span>
                        </template>
                        <el-menu-item-group style="margin-left: 60px">
                            <el-menu-item index="3-1" v-show="outputCar" @click="showTag('outputCarShow')"><i class="el-icon-tickets"></i>销售出库</el-menu-item>
                            <el-menu-item index="3-2" v-show="outputInfo" style="margin-left: 24px" @click="showTag('outputInfoShow')">
                                <i class="el-icon-tickets"></i>销售信息查询</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="4">
                        <template slot="title">
                            <i class="el-icon-shopping-cart-2"></i>
                            <span>库存管理</span>
                        </template>
                        <el-menu-item-group  style="margin-left: 60px">
                            <el-menu-item index="4-1" v-show="product" @click="showTag('productShow')"><i class="el-icon-tickets"></i>库存</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="5">
                        <template slot="title">
                            <i class="el-icon-reading"></i>
                            <span>统计信息</span>
                        </template>
                        <el-menu-item-group style="margin-left: 60px">
                            <el-menu-item index="5-1" v-show="saleCount" @click="showTag('saleShow')"><i class="el-icon-tickets"></i>销售统计</el-menu-item>
                            <el-menu-item index="5-2" v-show="customCount" @click="showTag('customCountShow')"><i class="el-icon-tickets"></i>客户统计</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="6">
                        <template slot="title">
                            <i class="el-icon-s-custom"></i>
                            <span>权限管理</span>
                        </template>
                        <el-menu-item-group style="margin-left: 60px">
                            <el-menu-item index="6-1" v-show="userManager" @click="showTag('userShow')"><i class="el-icon-tickets"></i>用户管理</el-menu-item>
                            <el-menu-item index="6-2" v-show="role" @click="showTag('roleShow')"><i class="el-icon-tickets"></i>角色管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="7">
                        <template slot="title">
                            <div style="margin-left: 25px">
                                <i class="el-icon-edit"></i>
                                <span>个人信息管理</span>
                            </div>
                        </template>
                        <el-menu-item-group style="margin-left: 60px">
                            <el-menu-item index="7-1" v-show="updatePwd" @click="showTag('updatePwdShow')"><i class="el-icon-tickets"></i>修改密码</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>

                    <el-submenu index="8">
                        <template slot="title">
                            <i class="el-icon-date"></i>
                            <span>日志信息</span>
                        </template>
                        <el-menu-item-group style="margin-left: 60px">
                            <el-menu-item index="8-1" v-show="log"  @click="showTag('LogShow')" ><i class="el-icon-tickets"></i>日志一览</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>
                </el-menu>
            </el-col>
            <el-col :span="20">
                <Supplier v-show="supplierShow"></Supplier>
                <Custom  v-show="customShow"></Custom>
                <InputCar v-show="inputCarShow"></InputCar>
                <InputInfo v-show="inputInfoShow"></InputInfo>
                <OutputCar v-show="outputCarShow"></OutputCar>
                <OutputInfo v-show="outputInfoShow"></OutputInfo>
                <Product v-show="productShow"></Product>
                <SaleCount v-show="saleShow"></SaleCount>
                <CustomCount v-show="customCountShow"></CustomCount>
                <User v-show="userShow"></User>
                <Role v-show="roleShow"></Role>
                <UpdatePwd v-show="updatePwdShow"></UpdatePwd>
               <Log v-show="LogShow"></Log>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import Supplier from "../components/Supplier";
    import Custom from "../components/Custom";
    import InputCar from "../components/InputCar";
    import InputInfo from "../components/InputInfo";
    import OutputCar from "../components/OutputCar";
    import OutputInfo from "../components/OutputInfo";
    import Product from "../components/Product";
    import SaleCount from "../components/SaleCount";
    import CustomCount from "../components/CustomCount";
    import User from "../components/User";
    import Role from "../components/Role";
    import UpdatePwd from "../components/UpdatePwd";
    import Log from "../components/Log";


    export default {
        name: "Jxcms",
        components: {
            Log,
            UpdatePwd,
            Role,
            User, CustomCount, SaleCount, Product, OutputInfo, OutputCar, InputInfo, InputCar, Custom, Supplier},
        data() {
            return {
                supplierShow: false,
                customShow: false,
                inputCarShow: false,
                inputInfoShow: false,
                outputCarShow: false,
                outputInfoShow: false,
                productShow: false,
                saleShow: false,
                customCountShow: false,
                userShow: false,
                roleShow: false,
                updatePwdShow: false,
                LogShow: false,

                supplier: false,
                custom: false,
                inputCar: false,
                inputInfo: false,
                outputCar: false,
                outputInfo: false,
                product: false,
                saleCount: false,
                customCount: false,
                userManager: false,
                role: false,
                updatePwd: false,
                log: false,

                roleBeans:"",
            }
        }, mounted: function () {
            this.aob()
        },
        methods:{
            init: function () {
                let array = new Array();
                for (let i = 0; i < this.roleBeans.length; i++) {
                    let roleBean = this.roleBeans[i];
                    for (let j = 0; j < roleBean.powerBeans.length; j++) {
                        let powerBean = roleBean.powerBeans[j];
                        array.push(powerBean.url)
                    }
                }
                // console.log("1111")

                let arr = [];
                for (let i = 0; i < array.length; i++) {
                    if (arr.indexOf(array[i]) == -1) {
                        arr.push(array[i]);
                    }
                }


                for (let w in this._data) {
                    for (let i = 0; i < arr.length; i++) {
                        if (w == arr[i]) {
                            this._data[w] = true;
                            break;
                        }
                    }
                }
            },
            showTag(name) {
                for (let w in this._data) {
                    // console.log(w)
                    if (w.indexOf("Show") != -1) {
                        this._data[w] = false;
                        if (w == name) {
                            this._data[w] = true;
                        }
                    }
                }
                // console.log(this.inputCarShow)
            }
        },computed:{
            // eslint-disable-next-line vue/return-in-computed-property
            aob: function () {
                // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                this.roleBeans = this.$store.state.user.userBean.roleBeans;
                this.init();
            }
        }

    }
</script>

<style scoped>
</style>